// 引入 Vue 用于创建 Vue 应用实例
import Vue from "vue";
// 引入 Toast 组件
import ToastComponents from "./index.vue";

// 定义一个常量，用于存储 Toast 组件的容器元素的 ID
const LayerToastId = "layer-Toast-wrapper";

// 定义一个异步函数 Toast，用于显示 Toast 消息
let Toast = async function (msg, time) {
  // 如果未指定显示时间，默认为 2000 毫秒
  time = time || 2000;

  // 获取页面上是否已存在 Toast 容器元素
  let ToastEl = document.getElementById(LayerToastId);
  // 如果已存在，不执行后续代码，直接返回
  if (ToastEl) {
    return;
  }
  // 创建一个 div 元素，用作 Toast 组件的容器
  const div = document.createElement("div");
  // 为该 div 设置 ID
  div.setAttribute("id", LayerToastId);
  // 将创建的 div 添加到 body 中
  document.body.appendChild(div);

  // 创建一个 Vue 应用实例，并挂载到新创建的 div 上
  let layerToastEl = new Vue(ToastComponents).$mount();
  // 设置 Toast 组件的消息内容和显示时间
  layerToastEl.msg = msg;
  layerToastEl.time = time;

  div.appendChild(layerToastEl.$el);
  // 执行组件中的方法 等待关闭后返回promise
  let hasClosed = await layerToastEl.open();
  // 当Toast提示关闭后再删除外层元素 时间最好与css动画一致
  if (hasClosed) {
    setTimeout(() => {
      document.body.removeChild(div);
    }, 400);
  }
};

// 导出一个对象，包含 install 方法，用于在 Vue 应用中安装这个 Toast 功能
export default {
  install(Vue) {
    Vue.prototype.$toast = Toast;
  },
};
